<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <title>瓜果超市</title>
</head>

<body>
<div id="app">
    <el-input placeholder="请输入内容" v-model="search" class="input-with-select"  @change="changeHandler">
        <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
    <el-radio-group v-model="category" @change="getData">
        <el-radio-button v-for="v in categorys" :label="v" :key="v">{{v}}</el-radio-button>
    </el-radio-group>
    <el-table :data="fruits" style="width: 100%">
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="180">
        </el-table-column>
        <el-table-column prop="category" label="种类">
        </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" @current-change="currentChange" :total="total">
    </el-pagination>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            page: 1,
            total: 0,
            fruits: [],
            categorys: [],
            category: [],
            search:''
        },
        created() {
            this.getData()

            this.getCategory()
        },
        methods: {
            async currentChange(page) {
                this.page = page;
                await this.getData()
            },
            async changeHandler(val){
                console.log('search...',val)
                this.search = val
                await this.getData()
            },
            async getData() {
                const res = await axios.get(`/api/list?page=${this.page}&category=${this.category}&keyword=${this.search}`)
                const data = res.data.data
                this.fruits = data.fruits
                this.total = data.pagination.total
            },
            async getCategory() {
                const res = await axios.get(`/api/category`)
                this.categorys = res.data.data
                console.log('category', this.categorys)
            }
        }
    });
</script>
</body>

</html>